<template>
    <div>
    <el-button type="primary" @click="dialogFormVisible = true;operataType = 'save'" style="margin-bottom: 20px;">
        添加购物车信息
    </el-button>
      <el-dialog title="购物车信息" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form :model="ShopCart">
          <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="ShopCart.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="购物车编号" :label-width="formLabelWidth">
          <el-input v-model="ShopCart.cart_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户编号" :label-width="formLabelWidth">
          <el-input v-model="ShopCart.user_id" auto-complete="off" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
      </el-dialog>
      <!-- 数据表格 -->
      <el-table
        border
        stripe
        :data="ShopCarts"
        max-height="500"
        style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="ID" width="180">
          <template slot-scope="scope">
              <span >{{ scope.row.id }}</span>
          </template>
      </el-table-column>
      <el-table-column label="购物车编号" width="160">
          <template slot-scope="scope">
              <span >{{ scope.row.cart_id }}</span>
          </template>
      </el-table-column>
      <el-table-column label="用户编号">
        <template slot-scope="scope">
            <span >{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
    <el-pagination
        style="margin-top: 20px;"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size = "pageSize"
        :current-page ="current"
        @current-change="loadShopCarts">
    </el-pagination>
</div>
</template>
<script>
    export default {
        name: "ShopCartView",
        data() {
            return {
                ShopCarts: [],
                dialogFormVisible:false, //控制对话框的显示
                formLabelWidth:'120px',
                ShopCart:{id:'',cart_id:'',user_id:''},//用户数据
                operataType:'',//操作类型  save  update
                total:0,//用户总数
                pageSize:5,//每页行数
                current:0,//当前页数
            }
        },
        methods:{
            //读取用户
            loadShopCarts(current){
                this.current = current
                this.$http.post('/shopCart?action=page', this.$qs.stringify({ 
                    pageSize: this.pageSize,
                    currentPage: this.current
                })).then(resp => {
                    //数据绑定
                    if(resp.data.data){
                        this.total = resp.data.data.total
                        this.ShopCarts = resp.data.data.records
                    }
                })
            },
            // 编辑用户
            handleEdit(index, row) {
                this.operataType = 'update';
                //显示对话框，绑定数据
                this.dialogFormVisible = true;
                //进行深克隆 row-->Strign-->json
                this.ShopCart = JSON.parse(JSON.stringify(row));
            },
            //保存数据操作
            handleSave(){
                if(this.operataType == 'save'){
                    //添加用户操作
                    console.log('save shopCart')
                    this.$http.post('/shopCart?action=save',this.$qs.stringify(this.ShopCart))
                        .then(resp => {
                            console.log('save ShopCart',resp.data)
                            if(resp.data.data == true){
                                this.loadShopCarts(this.current);
                            }
                        })
                }else{
                    //更新用户操作
                     this.$http.post('/shopCart?action=update',this.$qs.stringify(this.ShopCart))
                        .then(resp => {
                            console.log('update ShopCart',resp.data)
                            if(resp.data.data == true){
                                this.loadShopCarts(this.current);
                            }
                        })
                }
                this.dialogFormVisible = false
            },
            handleDelete(index, row) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$http.post('/shopCart?action=delete&id=' + row.id).then(resp =>{
                            if(resp.data.data == true){
                                this.loadShopCarts(this.current);
                                this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            }
                        })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
            },
            //对话框关闭
            handleClose(){
                this.ShopCart = {id:'',cart_id:'',user_id:''}
                this.operataType = ''
            }
        },
        //页面挂载钩子
        mounted(){
            this.loadShopCarts(1)
        }
    }
</script>
